<template>
  <main class="nav-bar">
    <section class="title">桌面壁纸软件</section>
    <section class="icon no-drag">
      <Pic fill="#333" size="21" theme="outline" @click="$router.push({ name: 'home' })" />
      <SettingOne
        fill="#333"
        size="21"
        theme="outline"
        @click="$router.push({ name: 'setting' })"
      />
    </section>
  </main>
</template>

<script lang="ts" setup>
import { Pic, SettingOne } from '@icon-park/vue-next'
</script>

<style lang="less" scoped>
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  height: 38px;
  box-sizing: border-box;

  .title {
    font-size: 16px;
    opacity: 0.8;
  }

  .icon {
    font-size: 0;
    cursor: pointer;

    > :first-child {
      margin-right: 12px;
    }
  }
}
</style>
